import Header from '@/layouts/header';
import { getHomeInfo, getTallyBookAmount } from '@/services/home';
import { FormatNumber } from '@/utils/format';
import { accDiv } from '@/utils/math';
import { RightOutlined } from '@ant-design/icons';
import { history, useModel } from '@umijs/max';
import { Button, Card, Spin, Tag } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const financialTools = [
  {
    title: (
      <div className="flex items-center gap-3">
        余额转账 <Tag color="gold">（有密）</Tag>{' '}
      </div>
    ),
    description: '支付宝余额批量转账产品',
    signCount: 'aliAccountNum',
    key: 'hasPWD',
    buttons: [
      { key: 'sign', text: '立即签约', disabled: true },
      { key: 'use', text: '立即使用', disabled: true },
    ],
    icon: '/home/balance-change.png',
  },
  {
    title: (
      <div className="flex items-center gap-3">
        ACS转账 <Tag color="gold">（无密）</Tag>{' '}
      </div>
    ),
    description: '支付宝备付金转账产品',
    signCount: 'safeAccountNum',
    key: 'noPWD',
    buttons: [
      {
        key: 'sign',
        text: '立即签约',
        to: '/account-center/sign-manager/account-sign',
      },
      { key: 'use', text: '立即使用', to: '/production-center/acs/acs-change' },
    ],
    icon: '/home/service_balance.png',
  },
  {
    title: '聚合收款',
    description: '支付宝备付金转账产品',
    signCount: '',
    key: '',
    buttons: [{ key: 'sign', text: '尚未开放', disabled: true }],
    icon: '/home/universe_amount.png',
  },
  {
    title: '直付通',
    description: '支付宝收单产品，支持在线分账',
    signCount: '',
    key: '',
    buttons: [{ key: 'sign', text: '尚未开放', disabled: true }],
    icon: '/home/zhifutong.png',
  },
  {
    title: '跨境支付',
    description: '支付境外收款，结汇便捷',
    signCount: '',
    key: '',
    buttons: [{ key: 'sign', text: '尚未开放', disabled: true }],
    icon: '/home/international_change.png',
    transparentIcon: false,
  },
];

const openAbility = [
  {
    title: 'API接口',
    description: '提供开放接口，方便系统对接',
    signCount: '',
    key: '',
    buttons: [{ key: 'sign', text: '查看接口文档', disabled: true }],
    icon: '/home/api.png',
  },
  {
    title: '开放平台',
    description: '用于应用、公/私钥管理等',
    signCount: '',
    key: '',
    buttons: [{ key: 'sign', text: '立即前往', disabled: true }],
    icon: '/home/open_platform.png',
  },
];

type HomeDataType = {
  id: number;
  safeAccountNum: number;
  safeBusinessNum: number;
  aliAccountNum: number;
  aliBusinessNum: number;
  dayAmount: number;
  dayTime: string;
  monthAmount: number;
  monthTime: string;
  [x: string]: any;
};

const HomePage: React.FC = () => {
  const [homeData, setHomeData] = useState<Partial<HomeDataType>>({});
  const [loading, setLoading] = useState(false);
  const [tallybookAmount, setTallybookAmount] = useState(0);
  const { initialState } = useModel('@@initialState');
  useEffect(() => {
    setLoading(true);
    getHomeInfo()
      .then((res) => {
        setHomeData(res || {});
      })
      .finally(() => {
        setLoading(false);
      });
    getTallyBookAmount().then((res) => {
      setTallybookAmount(res || 0);
    });
  }, []);
  return (
    <div className="overflow-auto">
      <Header />
      <Spin spinning={loading}>
        <div className="mt-14 pb-14 bg-[#f7f9ff] min-h-[calc(100vh_-_56px)] min-w-[1024px]  max-w-[2560px]">
          <div className="w-[1440px] m-auto pt-8">
            <div className="grid grid-cols-3 gap-4">
              <Card hoverable style={{ paddingLeft: 10 }} bordered={false}>
                <div className="flex gap-3 items-center justify-between">
                  <div className="flex gap-3">
                    <img src="/home/service_fee.png" className="w-6" />
                    <span className="text-lg">服务费余额</span>
                  </div>
                  <span
                    className="text-[#00000073]"
                    onClick={() => {
                      history.push(
                        '/financial-center/servicefee/service-detail',
                      );
                    }}
                  >
                    查看服务费明细
                    <RightOutlined />
                  </span>
                </div>
                <div className=" my-2">
                  ¥
                  <span className="text-[19px]">
                    {FormatNumber(
                      accDiv(initialState?.currentUser?.moneyLeft, 100),
                    )}
                  </span>
                </div>
                <div className="flex">
                  <div>
                    <Button
                      onClick={() => {
                        history.push(
                          '/financial-center/servicefee/service-recharge',
                        );
                      }}
                    >
                      充值
                    </Button>
                    <Button
                      onClick={() => {
                        history.push(
                          '/financial-center/servicefee/service-withdraw',
                        );
                      }}
                      className="ml-3"
                    >
                      提现
                    </Button>
                  </div>
                </div>
              </Card>
              <Card hoverable style={{ paddingLeft: 10 }} bordered={false}>
                <div className="flex gap-3 items-center justify-between">
                  <div className="flex gap-3">
                    <img src="/home/tally_book.png" className="w-6" />
                    <span className="text-lg">记账本总余额</span>
                  </div>
                  <span
                    className="text-[#00000073]"
                    onClick={() => {
                      history.push(
                        '/financial-center/tallybook/tallybook-account',
                      );
                    }}
                  >
                    查看记账本账户
                    <RightOutlined />
                  </span>
                </div>
                <div className="my-2">
                  ¥
                  <span className="text-[19px] ">
                    {FormatNumber(tallybookAmount)}
                  </span>
                </div>
                <div className="flex">
                  <div>
                    <Button
                      onClick={() => {
                        history.push(
                          '/financial-center/tallybook/tallybook-account',
                        );
                      }}
                    >
                      充值
                    </Button>
                    <Button
                      onClick={() => {
                        history.push(
                          '/financial-center/tallybook/tallybook-account',
                        );
                      }}
                      className="ml-3"
                    >
                      提现
                    </Button>
                  </div>
                </div>
              </Card>
              <Card hoverable style={{ paddingLeft: 10 }} bordered={false}>
                <div className="flex gap-3">
                  <img src="/home/sign.png" className="w-6" />
                  <span className="text-lg">签约情况</span>
                </div>
                <div className="flex mt-3">
                  <div className="flex flex-col  flex-1 gap-1">
                    <div>
                      余额转账 <Tag color="gold">(有密)</Tag>
                    </div>
                    <div>
                      授权企业数量
                      <span className="text-[#00bdff]">
                        {homeData.aliBusinessNum}
                      </span>
                      家
                    </div>
                    <div>
                      签约账户数
                      <span className="text-[#00bdff]">
                        {homeData.aliAccountNum}
                      </span>
                      个
                    </div>
                  </div>

                  <div className="flex flex-col  flex-1 gap-1">
                    <div>
                      ACS转账 <Tag color="gold">(无密)</Tag>
                    </div>
                    <div>
                      授权企业数量
                      <span className="text-[#00bdff]">
                        {homeData.safeBusinessNum}
                      </span>
                      家
                    </div>
                    <div>
                      签约账户数
                      <span className="text-[#00bdff]">
                        {homeData.safeAccountNum}
                      </span>
                      个
                    </div>
                  </div>
                </div>
              </Card>
              <Card
                hoverable
                styles={{
                  body: {
                    minHeight: 120,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  },
                }}
              >
                <div className="flex items-center">
                  <div className="flex text-lg min-w-fit gap-2">
                    <img src="/home/change-statistic.png" className="w-6" />
                    <span>转账统计</span>
                  </div>
                  <Tag color="success" className="ml-2 mr-4">
                    今日
                  </Tag>
                  <div className="min-w-fit text-[#00000073]">统计时间：</div>
                  <div className="min-w-fit break-all text-[#00000073]">
                    {homeData.dayTime}
                  </div>
                </div>
                <div className="mt-8 mb-2">
                  ¥
                  <span className="text-[24px]">
                    {FormatNumber(homeData.dayAmount) || 0}
                  </span>
                </div>
              </Card>
              <Card
                hoverable
                styles={{
                  body: {
                    minHeight: 120,
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'space-between',
                    alignItems: 'center',
                  },
                }}
                bordered={false}
              >
                <div className="flex items-center">
                  <div className="flex text-lg min-w-fit gap-2">
                    <img src="/home/change-statistic.png" className="w-6" />
                    <span>转账统计</span>
                  </div>
                  <Tag color="success" className="ml-2 mr-4">
                    {dayjs().month() + 1}月
                  </Tag>
                  <span className="min-w-fit text-[#00000073]">
                    统计截止时间：
                  </span>
                  <span className="min-w-fit text-[#00000073]">
                    {homeData.monthTime}
                  </span>
                </div>
                <div className="mt-8 mb-2">
                  ¥
                  <span className="text-[24px]">
                    {FormatNumber(homeData.monthAmount) || 0}
                  </span>
                </div>
              </Card>
            </div>
            {/* 资金工具 */}
            <div className="inline-block font-bold text-[18px] my-4">
              资金工具
            </div>
            <div className="grid grid-cols-3 gap-4">
              {financialTools.map((item, index) => {
                return (
                  <Card hoverable key={index}>
                    <div className="flex flex-col justify-between h-[120px] relative px-4">
                      <div className="flex items-center justify-between">
                        <div className="text-lg ">{item.title}</div>
                        <div>签约账号：{homeData[item.signCount] || 0}个</div>
                      </div>
                      <div>{item.description}</div>
                      <div className="flex items-center justify-between">
                        <div className="flex gap-3">
                          {item.buttons.map((item: any) => {
                            return (
                              <Button
                                {...item}
                                onClick={() => {
                                  if (item.to) {
                                    history.push(item.to);
                                  }
                                }}
                                key={item.key}
                              >
                                {item.text}
                              </Button>
                            );
                          })}
                        </div>
                      </div>
                      <div
                        className={`absolute right-6 bottom-0 w-20 h-20  ${
                          item.transparentIcon
                            ? 'bg-[#3894ff] rounded-full p-3'
                            : ''
                        }`}
                      >
                        <img src={item.icon} />
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
            <div className="inline-block font-bold text-[18px] my-4">
              开放能力
            </div>
            <div className="grid grid-cols-3 gap-4">
              {openAbility.map((item, index) => {
                return (
                  <Card hoverable key={index}>
                    <div className="flex flex-col justify-between h-[120px] relative px-4">
                      <div className="flex items-center justify-between">
                        <div className="text-lg ">{item.title}</div>
                      </div>
                      <div>{item.description}</div>
                      <div className="flex items-center justify-between">
                        <div className="flex gap-3">
                          {item.buttons.map((item) => {
                            return (
                              <Button {...item} key={item.key}>
                                {item.text}
                              </Button>
                            );
                          })}
                        </div>
                      </div>
                      <div className="absolute right-6 bottom-0 w-20 h-20">
                        <img src={item.icon} />
                      </div>
                    </div>
                  </Card>
                );
              })}
            </div>
          </div>
        </div>
      </Spin>
    </div>
  );
};

export default HomePage;
